<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <button class="back-btn" @click="navigateBack">
        <uni-icons type="left" size="28" color="#fff"></uni-icons>
      </button>
      <text class="header-title">新增备份录</text>
    </view>
    
    <!-- 表单内容区域 -->
    <view class="form-container">
      <view class="form-card">
        <!-- 第一个输入框 -->
        <view class="input-group">
          <input 
            type="text" 
            placeholder="请输入标题" 
            class="form-input"
            v-model="record.title"
          />
        </view>
        
        <!-- 第二个输入框 -->
        <view class="input-group">
          <input 
            type="text" 
            placeholder="请输入时间" 
            class="form-input"
            v-model="record.time"
          />
        </view>
      </view>
      
      <!-- 添加按钮 -->
      <button class="add-btn" @click="saveRecord">
        添加
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      record: {
        title: '',
        time: ''
      }
    };
  },
  methods: {
    // 返回上一页
    navigateBack() {
      uni.navigateBack();
    },
    
    // 保存备份录
    saveRecord() {
      // 验证输入
      if (!this.record.title.trim()) {
        uni.showToast({
          title: '请输入标题',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      
      if (!this.record.time.trim()) {
        uni.showToast({
          title: '请输入时间',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      
      // 获取上一页实例并添加新记录
      const pages = getCurrentPages();
      const prevPage = pages[pages.length - 2];
      
      // 添加到笔记列表
      prevPage.$vm.notes.push({
        title: this.record.title,
        time: this.record.time
      });
      
      // 更新过滤后的列表
      prevPage.$vm.filteredNotes = [...prevPage.$vm.notes];
      
      // 提示保存成功并返回
      uni.showToast({
        title: '添加成功',
        icon: 'success',
        duration: 2000
      });
      
      setTimeout(() => {
        this.navigateBack();
      }, 1000);
    }
  }
};
</script>

<style scoped>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 顶部导航栏 - 渐变色背景 */
.header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25rpx 30rpx;
  background: linear-gradient(90deg, #FF9F68 0%, #FF6B6B 100%);
  position: relative;
  height: 100rpx;
}

.back-btn {
  position: absolute;
  left: 30rpx;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  padding: 0;
}

.header-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #fff;
}

/* 表单容器 */
.form-container {
  padding: 40rpx 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 卡片式表单 */
.form-card {
  width: 100%;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 60rpx;
}

/* 输入组样式 */
.input-group {
  margin-bottom: 30rpx;
}

.input-group:last-child {
  margin-bottom: 0;
}

.form-input {
  width: 100%;
  height: 90rpx;
  border-radius: 10rpx;
  padding: 0 25rpx;
  font-size: 30rpx;
  border: 1px solid #eee;
  background-color: #f9f9f9;
}

/* 添加按钮样式 */
.add-btn {
  width: 100%;
  height: 96rpx;
  background-color: #1677ff;
  color: #fff;
  font-size: 32rpx;
  border-radius: 48rpx;
  line-height: 96rpx;
  box-shadow: 0 4rpx 15rpx rgba(22, 119, 255, 0.3);
  transition: all 0.3s;
}

.add-btn:hover {
  background-color: #005ce6;
}
</style>
